<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Delivery Tracker</title>

<link href="../../css/style.css" media="screen" rel="stylesheet"/>
<link href="../../css/mosaic.css" media="screen" rel="stylesheet"/>
<link href="../../css/filtros.css" media="screen" rel="stylesheet"/>
<link href="../../css/MenuMatic.css" media="screen" rel="stylesheet"/>

<style type="text/css">

	/* The page body */
	html, body {
	  background: #333;
	  font-family: Helvetica, Arial, sans-serif;
	}
	
	/* The div holding the wooden table img tag */
	#wooden-table {
	  position: absolute;
	  left: -5000px;
	}
	
	/* The light table itself */
	#lighttable {
	  position: relative;
	  width: 400px;
	  height: 250px;
	  background: #eee url(../../images/wooden-table.jpg);
	  padding: 70px;
	  margin: 0 auto;
	  border: 20px solid #111;
	  display: none;
	}
	
	/* Photos on the light table */
	#lighttable img {
	  border: 10px solid #fff;
	  box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
	  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
	  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
	  position: absolute;
	  left: -9999px;
	  top: -9999px;
	}
	
	/* The description at the top of the page */
	
	#description {
	  padding: 10px 10px 5px 10px;
	  background: #111;
	  color: #fff;
	  width: 45em;
	  margin: 0 auto -5px auto;
	  text-align: center;
	}
	
	#description h1 {
	  font-size: 14px;
	}
	
	#description a {
	  color: #bbf;
	}

</style>

<script language="JavaScript" src="../../validation/user.js"></script>
<script language="JavaScript" src="../../js/mosaic.1.0.1.js"></script>
<script language="JavaScript" src="../../js/init.js"></script>
<script language="JavaScript" src="../../js/jquery.js"></script>
<script language="JavaScript" src="../../js/filters.js"></script>
<script language="JavaScript" src="../../js/ajax.js"></script>
<script language="JavaScript" src="../../js/jquery-ui-1.8.2.custom.min.js"></script>

<script language="JavaScript">
var newImageZIndex = 1;  // To make sure newly-loaded images land on top of images on the table
var loaded = false;      // Used to prevent initPhotos() running twice

// When the document is ready, fire up the table!
$( init );

// When the wooden table image has loaded, start bringing in the photos
function init() {
  var woodenTable = $('#wooden-table img');
  woodenTable.load( initPhotos );

  // Hack for browsers that don't fire load events for cached images
  if ( woodenTable.get(0).complete ) $(woodenTable).trigger("load");
}

// Set up each of the photos on the table
function initPhotos() {

  // (Ensure this function doesn't run twice)
  if ( loaded ) return;
  loaded = true;

  // The table image has loaded, so bring in the table
  $('#lighttable').fadeIn('fast');

  // Process each photo in turn...
  $('#lighttable img').each( function(index) {

		// Set a random position and angle for this photo
		var left = Math.floor( Math.random() * 450 + 100 );
		var top = Math.floor( Math.random() * 100 + 100 );
		var angle = Math.floor( Math.random() * 60 - 30 );
		$(this).css( 'left', left+'px' );
		$(this).css( 'top', top+'px' );
		$(this).css( 'transform', 'rotate(' + angle + 'deg)' );   
		$(this).css( '-moz-transform', 'rotate(' + angle + 'deg)' );   
		$(this).css( '-webkit-transform', 'rotate(' + angle + 'deg)' );
		$(this).css( '-o-transform', 'rotate(' + angle + 'deg)' );
	
		// Make the photo draggable
		$(this).draggable( { containment: 'parent', stack: '#lighttable img', cursor: 'pointer' } );
	
		// Hide the photo for now, in case it hasn't finished loading
		//$(this).hide();
	
		// When the photo image has loaded...
		$(this).load( function() {

		  // (Ensure this function doesn't run twice)
		  if ( $(this).data('loaded') ) return;
		  $(this).data('loaded', true);
	
		  // Record the photo's true dimensions
		  var imgWidth = $(this).width();
		  var imgHeight = $(this).height();
	
		  // Make the photo bigger, so it looks like it's high above the table
		  $(this).css( 'width', imgWidth * 1.2 );
		  $(this).css( 'height', imgHeight * 1.2 );
	
		  // Make it completely transparent, ready for fading in
		  $(this).css( 'opacity', 0 );
	
		  // Make sure its z-index is higher than the photos already on the table
		  $(this).css( 'z-index', newImageZIndex++ );
	
		  // Gradually reduce the photo's dimensions to normal, fading it in as we go
		  $(this).animate( { width: imgWidth, height: imgHeight, opacity: .95 }, 1200 );
		} );

		// Hack for browsers that don't fire load events for cached images
		if ( this.complete ) $(this).trigger("load");

  	});

}


</script>



</head>

<body>
<div id="wrapper">
<!-- banner -->
	<div id="banner">
		<div id="logo"><img alt=""  src="../../images/logo.png"/></div>
		<div id="coffee"><img alt=""  src="../../images/coffee.png"/></div>
		<div style="clear:both"></div>

	</div>